body,input,form,table,dd,dt,dl,div,span,b,i,
em,strong,header,footer,aside,article,address,
section,p,ul,ol,li,a{
	margin: 0;
	padding: 0;
}

body{
	font-family: "microsoft yahei";
}

li{
	list-style: none;
}

.wrap{
	width: 1200px;
	margin: auto;
}

.wrap:before,.wrap:after{
	content: 'clear';
	height: 0;
	display: block;
	visibility: hidden;
	clear: both;
}

header{
	width: 100%;
	height: 70px;
	position:relative;
}

.logo{
	/*background-image: url(../img/logo.jpg);*/
	display: inline-block;
	width: 220px;
	height: 60px;
	margin-top: 15px;
}

.logoAnimation{
	position: relative;
	animation-name:logo;/* 绑定keyframes的名称*/
	animation-duration:4s;/* 时间 */
	animation-iteration-count:1;/* 播放次数 */
	animation-timing-function:linear;/* 规定动画的速度曲线 */
/*	animation-direction:alternate;/* 定义动画轮练反向播放   */*/
}


@keyframes logo{
	0%
	{
		left: 1000px;
	}
	100%{
		left: 0px;
	}
}


header img{
	width: 180px;
	height: 50px;	
}

/*header img:hover{
	transform: scale(1.2);
}*/

.header_right{
	width: 950px;
	height: 100%;
	float: right;
	position: relative;
}

/*规定气泡样式动画效果*/

.bubble{
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	border: 3px #62C392 solid;
	border-radius: 50%;
	position: absolute;
	
}

.bubble1{
	width: 20px;
	height: 20px;
	top: 70px;
	left: 55px;
	animation: a 8s linear infinite;
	animation-delay: 3.5s;
	opacity: 0;
}

.bubble2{
	width: 12px;
	height: 12px;
	top: 65px;
	left:200px;
	animation: a 5s ease-in-out infinite;
	animation-delay: 2.5s;
	opacity: 0;
}

.bubble3{
	top: 60px;
	left: 450px;
	animation: a 10s ease-in-out infinite;
	animation-delay: 2s;
	opacity: 0;
}

.bubble4{
	width: 20px;
	height: 20px;
	top: 55px;
	left: 650px;
	animation: a 8s linear infinite;
	animation-delay: 1s;
	opacity: 0;
}

.bubble5{
	top: 70px;
	left: 850px;
	animation: a 6s ease-in-out infinite;
	animation-delay: 0.5s;
	opacity: 0;
}

.bubble6{
	width: 10px;
	height: 10px;
	top: 70px;
	left: 550px;
	animation: a 6s linear infinite;
	animation-delay: 1.5s;
	opacity: 0;
}

.bubble7{
	width: 20px;
	height: 20px;
	top: 70px;
	left: 300px;
	animation: a 8s linear infinite;
	animation-delay: 6s;
	opacity: 0;
}
@keyframes a{
	0%
	{
		opacity: 0.1;	
	}
	50%
	{
		opacity: 0.8;
		margin-left: 20px;
		top: 40px;
	}
	80%
	{
		opacity: 0;
		margin-left: 50px;
		top: 0px;
		transform: scale(1.2);
	}
	100%{
		opacity: 0;
	}
}

/*小logo样式与动画效果*/

.cross img{
	width: 24px;
	height: 24px;
}

.cross{
	position: absolute;
}

.cross1{
	top: 40px;
	left: 150px;
	animation: b 6s ease-in-out infinite;
	animation-delay: 3s;
	opacity: 0;
}

@keyframes b{
	0%{
		opacity: 0;
	}
	10%{
		opacity: 0.4;
	}
	50%{
		opacity: 1;
		transform: scale(1.4);
	}
	80%{
		opacity: 0.4;
	}
	100%{
		opacity: 0;
	}
}

.cross2{
	top: 20px;
	left: 400px;
	animation: c 6s ease-in-out infinite;
	animation-delay: 2s;
	opacity: 0;
}

.cross4{
	top: 60px;
	left: 750px;
	animation: c 10s ease-in-out infinite;
	animation-delay: 0.5s;
	opacity: 0;
}

@keyframes c{
	0%{
		opacity: 0;
	}
	10%{
		opacity: 1;
	}
	50%{
		opacity: 1;
		transform: rotate(360deg);
	}
	90%{
		opacity: 1;
	}
}

.cross3{
	top: 25px;
	left: 620px;
	animation: b 8s ease-in-out infinite;
	animation-delay: 1.5s;
	opacity: 0;
}

/*@keyframes d{
	0%{
		opacity: 0;
	}
	25%{
		opacity: 1;
		transform: rotateX(180deg);
	}
	50%{
		transform: rotateY(180deg);
		opacity: 1;
	}
	75%{
		opacity: 1;
		transform: rotateX(180deg);
	}
}*/

/*主体*/

.main{
	margin-top: 30px;
}

aside{
	float: left;
	width: 220px;
	min-height:600px ;
}

aside summary{
	padding: 0;
	margin: 0;
	background-color: #62c392;
	padding: 8px 10px;
	color: #fff;
	border-bottom: 2px #FFFFFF solid;
}

aside summary{
	cursor: pointer;
}

aside ul li{
	list-style: none;
	margin: 0;
	
}

aside ul li a:hover{
	background-color: #999999;
	color: #fff;
}

aside ul li a{
	font-weight: 500;
	display: inline-block;
	padding: 7px 0px 7px 20px;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #62C392;	
	background-color: #eee;
	border-bottom: 1px #FFFFFF solid;
	font-size: 15px;
	box-sizing: border-box;
}

.active{
	background:deepskyblue;
	color: #fff;
}

section{
	float: right;
	width: 950px;
	min-height: 600px;
}
footer{
	font-size: 12px;
	color: #999;
	text-align: center;
	margin-top: 50px;
}